<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一个什么奇怪的日历</title>
    <link
        rel="stylesheet"
        href="https://image-space.thebestxt.cc/website/css/ele-plus.css"
    />
    <!-- Import Vue 3 -->
    <script src="https://image-space.thebestxt.cc/website/js/ele-plus-zh-cn.js"></script>
    <script src="https://image-space.thebestxt.cc/website/js/vue3.js"></script>
    <!-- Import component library -->
    <script src="https://image-space.thebestxt.cc/website/js/ele-plus.js"></script>
    <script src="https://image-space.thebestxt.cc/website/js/ele-plus-icon.js"></script>
    <style>
        #app {

        }
        .title {
            width: 100%;
            text-align: center;
            margin-top: 15vh;
            font-size: xx-large;
            font-weight: 700;
            color: #333;
        }
        .subtitle {
            width: 100%;
            text-align: center;
            font-size: larger;
            font-weight: 300;
            margin-top: 20px;
        }
        .tabs {
            margin: 30px 25% 0 25%;
        }
        .upload {
            width: 80%;
            margin-left: 10%;
            margin-top: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .el-upload {
            width: 100%;
        }
        .button {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            margin-top: 50px;
        }
        .tip {
            width: 100%;

            display: flex;
            flex-direction: column;
            margin-top: 20px;
        }
        .tip-title {
            font-size: medium;
            font-weight: 700;
        }
        .tip-row {
            font-size: smaller;
            color: #666;
        }
        .tip-row::before {
            content: '· ';
        }

        .filelist-title {
            border-left: solid 5px #3595FB;
            padding-left: 10px;
            margin-left: 25%;
            margin-top: 50px;
            margin-bottom: 20px;
        }

        .filelist {
            width: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }

        .filelist .fileitem {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: calc(33% - 30px);
            margin: 10px;
        }
        .filelist .fileitem .fileitem-image {}
        .filelist .fileitem .fileitem-name {
            font-size: small;
            color: #333;
            margin-top: 10px;
        }
        .log-row {
            margin-bottom: 20px;
            font-size: small;
        }
        .log-row-title {
            font-size: medium;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="title">一个什么奇怪的日历 上传工具</div>
        <div class="subtitle">传就完事了</div>
        <el-tabs
            type="card"
            class="tabs"
            v-model="activeTabName">
            <el-tab-pane label="上传" name="first">
                <el-upload
                    class="upload"
                    drag
                    multiple
                    action="/xue_calendar/upload"
                    :show-file-list="false"
                    accept="application/image"
                    :on-success="handleSuccess"
                    :on-error="handleError">
                        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                        <div class="el-upload__text">
                            把文件拖进来或者 <em>点击上传</em>
                        </div>
                        <template #tip>
                            <div class="el-upload__tip">
                                <!-- <div>上传 .zip 的压缩包会自动解压缩</div> -->
                            </div>
                        </template>
                </el-upload>
                <div class="tip">
                    <div class="tip-title">使用方法</div>
                    <div class="tip-row">直接把文件拖进来，或者点击上面的框来选择文件。</div>
                    <div class="tip-title">显示到页面上的规则：</div>
                    <div class="tip-row">按日期匹配文件名，以对应日期开头的文件都会显示到页面上，</div>
                    <div class="tip-row">例如选择了1月5日，那么所有以 1.5 开头的图片就都在页面上显示了。</div>
                    <div class="tip-title">分发地址：</div>
                    <div class="tip-row">普通地址：https://mynbxuanbro.thebestxt.cc/xue_calendar</div>
                    <div class="tip-row">带日期的地址：https://mynbxuanbro.thebestxt.cc/xue_calendar?date=1.5</div>
                </div>
                <div class="button">
                    <el-tooltip
                        class="box-item"
                        effect="dark"
                        placement="left-start">
                        <template #content>
                            <div>当前前台网址：@{url}</div>
                        </template>
                        <el-button size="large" @click="handleOpenWebsite">打开显示页面</el-button>
                            </el-tooltip>
                        </el-button>
                    <!-- <el-button type="primary" size="large" @click="handleUpload">上传他妈的</el-button> -->
                </div>
            </el-tab-pane>
            <el-tab-pane label="文件列表" name="second">
                <el-button class="del-all-btn" type="danger" size="small" @click="handleDeleteAll">全部删除</el-button>

                <div class="filelist">
                    <div v-for="(v, k) in list" :key="k" class="fileitem">
                        <el-image
                            :src="`${urlPrefix}${v.key}?imageView2/0/q/66|imageslim	`"
                            class="fileitem-image"
                            :hide-on-click-modal="true"
                            :preview-src-list="list.map(v => `${urlPrefix}${v.key}`)">
                        </el-image>
                        <div class="fileitem-name">
                            @{ v.key.replaceAll('xue_calendar/', '') } <el-button round size="small" type="danger" @click="handleDelete(v.key)">删除</el-button>
                        </div>
                        <!-- <div class="file-btns">
                            <el-button round size="small" @click="handlePreview(`${urlPrefix}${v.key}`)">查看</el-button>
                            
                        </div> -->
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="记录" name="third">
                <div class="log-row">总共被访问了 {{ logCount }} 次</div>
                <div class="log-row log-row-title">最近 20 次访问记录</div>
                <el-table :data="log">
                    <el-table-column label="ip" prop="ip"></el-table-column>
                    <el-table-column label="url" prop="url"></el-table-column>
                    <el-table-column label="访问时间">
                        <template #default="scope">
                            @{ new Date(Number(scope.row.create_time)).toLocaleString() }
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <!-- <el-tab-pane label="Task" name="fourth">Task</el-tab-pane> -->
        </el-tabs>
    </div>
    <script>
        const { createApp, ref } = Vue
        const app = createApp({
            setup() {
                const activeTabName = ref('first')
                const url = ref('/xue_calendar')
                // const url = ref('http://mynbxuanbro.thebestxt.cc/xue_calendar')
                const urlPrefix = ref('https://image-space.thebestxt.cc/')

                const list = ref(JSON.parse('{{ list | safe }}'))
                const log = ref(JSON.parse('{{ log | safe }}'))
                
                console.log(list);
                

                const handleError = (res, file, files) => {
                    ElementPlus.ElMessage.error('这个不能传啊兄弟')
                }
                const handleSuccess = (res, file, files) => {
                    console.log('on success', res, file, JSON.parse(JSON.stringify(files)))
                    if (res.code == 200) {
                        ElementPlus.ElMessage.success(`${file.name} 上传完成`)
                        if (files.every(v => v.status === 'success')) {
                            ElementPlus.ElMessage.success(`全部上传完成，2秒后刷新页面以重新载入文件列表`)
                            setTimeout(() => {
                                location.reload()
                            }, 2000)
                        }
                    } else {
                        ElementPlus.ElMessage.error(res.msg)
                    }
                }
                const handleUpload = () => {
                    ElementPlus.ElMessage.warning('不用点按钮，你选了文件就自动传了')
                }
                const handleOpenWebsite = () => {
                    window.open(url.value)
                }

                const handlePreview = url => {
                    window.open(url)
                }
                const handleDelete = key => {
                    fetch(`/xue_calendar/delete?key=${key}`).then(resp => {
                        console.log('handleDelete.res')
                        resp.json().then(res => {
                            console.log(res)
                            if (res.code === 200) {
                                ElementPlus.ElMessage.success('删除成功')
                                const findIndex = list.value.findIndex(v => v.key === key)
                                if (findIndex > -1) {
                                    list.value.splice(findIndex, 1)
                                }
                            } else {
                                ElementPlus.ElMessage.error(res.msg)
                            }
                        })
                    })
                }
                const handleDeleteAll = key => {
                    fetch(`/xue_calendar/delete`).then(resp => {
                        console.log('handleDeleteAll.res', resp)
                        resp.json().then(res => {
                            console.log(res)
                            if (res.code === 200) {
                                ElementPlus.ElMessage.success('删除成功')
                                window.location.reload()
                            } else {
                                ElementPlus.ElMessage.error(res.msg)
                            }
                        })
                    })
                }
                return {
                    activeTabName,
                    url,
                    urlPrefix,
                    list,
                    log,
                    handleError,
                    handleSuccess,
                    handleUpload,
                    handleOpenWebsite,
                    handlePreview,
                    handleDelete,
                    handleDeleteAll,
                }
            }
        })
        console.log(app.config)
        app.config.compilerOptions.delimiters = ['@{', '}']
        app.use(ElementPlus)
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
            app.component(key, component)
        }
        app.mount('#app')
    </script>
</body>
</html>